<template>
    <el-table-column  :align="align" v-bind="$attrs" v-on="$listeners"  :width="width">
      <template slot-scope="{row}">
        <template v-if="type=='circle-text'" >
          <span class="circle" :style="{background:getObject(row).color}"></span>{{getObject(row).name}}
        </template>
        <template v-else-if="type=='circle'" >
          <span class="circle" :style="{background:getObject(row).color}" :title="getObject(row).name"></span>
        </template>
        <template v-else-if="type=='colorfull-text'" >
          <span :style="{color:getObject(row).color}">{{getObject(row).name}}</span>
        </template>
        <template v-if="type=='text'">
          {{getObject(row).name}}
        </template>
      </template>
    </el-table-column>
</template>
<script>
    export default {
        name:"MyDictColumn",
        props:{
          width:{
              type:String,
              default:"80"
          },
          distKey:{
            type:String,
            default:""
          },
          type:{
            type:String,
            default:"text"
          },
          prop:{
            type:String,
            default:""
          },
          align:{
            type:String,
            default:"left"
          }
        },
        data(){
          return {
            statusOptions:[]
          }
        },
        created() {
          this.getDicts(this.distKey).then(res => {
            this.statusOptions = res.data;
          });
        },
        methods:{
            myFormatter(row){
              let text = ""
                this.statusOptions.map(item=>{
                  if(item.value == row[this.prop]){
                    text = item.name
                    return
                  }
                })
                return text
            },
            getObject(row){
              let obj = {}
              this.statusOptions.map(item=>{
                if(item.value == row[this.prop]){
                  obj = item
                  return
                }
              })
              return obj
            }
        }
    }
</script>
<style lang="scss" scoped>
  .circle{
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 50%;
  }
</style>
